﻿@namespace Masa.Blazor.Components.VideoFeeder
@using Masa.Blazor.Components.Xgplayer.Plugins.Controls
@inherits MasaComponentBase
@inject I18n I18n
@typeparam TItem

@if (_available)
{
    var poster = OnlyShowPosterInMusicMode ? null : Data.Poster;

    <MXgplayer Poster="@poster"
               Autoplay="@Autoplay"
               AutoplayMuted="@AutoplayMuted"
               StartTime="@Data.StartTime"
               Loop="@Loop"
               Url="@Data.Url"
               Ignores="@IgnoredXgplayerPlugins"
               Class="@_playerModifierBuilder.Add(Portrait).Build()"
               Height="@("100%")"
               Width="@("100%")"
               OnReady="@OnReady"
               OnVideoMetadataLoaded="@HandleOnMetadataLoaded"
               OnFullscreenChange="@HandleOnFullscreen"
               OnVideoResize="@HandleOnVideoResize"
               OnEnded="@OnEnded"
               data-player-index="@Index"
               @ref="_xgplayer">
        <MXgplayerStart ShowAtPause/>
        <MXgplayerControls Mode="ControlsMode.Flex"/>
        <MXgplayerVolume Default="1f"/>
        <MXgplayerDynamicBg Disable="@(!DynamicBg)"/>
        <MXgplayerFullscreen RotateFullscreen="@RotateFullscreen" NeedBackIcon/>
    </MXgplayer>

    <MThemeProvider WithBackground
                    Class="@ControlsElement.ToString()"
                    Theme="dark">
        @if (_isMusic && Data.Poster is not null)
        {
            <div class="m-video-feeder__music-cover">
                <img src="@Data.Poster" alt="Poster"/>
            </div>
        }

        @if (ShowFullscreenBtn)
        {
            <MChip Class="@ControlsFullscreenElement.ToString()"
                   Outlined
                   Small
                   OnClick="@GetFullscreenAsync"
                   Style="@_fullscreenChipStyle">
                @I18n.T("$masaBlazor.video-feeder.fullscreen")
            </MChip>
        }
        <div class="@ControlsTopElement">
            @if (OnGoBack.HasDelegate)
            {
                <MButton Class="go-back-btn" Color="white" Text IconName="$goBack" OnClick="@OnGoBack"/>
            }

            <div class="top-content">@TopContent?.Invoke(Data.Item)</div>
        </div>
        <div class="@ControlsBottomElement">
            @BottomContent?.Invoke(Data.Item)
        </div>
        <div class="@ControlsRightElement">
            <MDefaultsProvider Defaults="@_rightActionDefaults">
                @ActionsContent?.Invoke(Data.Item)
                <MToggle Value="@GlobalMuted"
                         ValueChanged="@HandleOnGlobalMutedChange"
                         DataOn="@("mdi-volume-off")"
                         Dataoff="@("mdi-volume-high")">
                    <MButton IconName="@context.Data"
                             Large
                             OnClick="@context.Toggle"
                             OnClickStopPropagation/>
                </MToggle>
            </MDefaultsProvider>
        </div>
    </MThemeProvider>
}
